<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            前端百宝箱
        </title>
        <style type="text/css">
            body { padding-top: 60px; padding-bottom: 10px; }
        </style>
        <link href="../css/bootstrap.css" rel="stylesheet">
		<link rel="stylesheet" href="../js/CodeMirror/lib/codemirror.css">
		<link href="../css/main.css" rel="stylesheet">

		<script src="../js/CodeMirror/lib/codemirror.js"></script>
		<!--<script src="../js/CodeMirror/mode/xml/xml.js"></script>-->
		<script src="../js/CodeMirror/mode/javascript/javascript.js"></script>
		<!--<script src="../js/CodeMirror/mode/css/css.js"></script>-->
		<!--<script src="../js/CodeMirror/mode/htmlmixed/htmlmixed.js"></script>-->

		<script src="../js/jquery-1.7.1.min.js"></script>
		<script src="../js/bootstrap.js"></script>
		<!--Pcker begin--->
		<script src="../js/base2.js"></script>
		<script src="../js/Packer.js"></script>
		<script src="../js/Words.js"></script>
		<!--Pcker end--->
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
            </script>
        <![endif]-->
    </head>
    
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                    </a>
                    <a class="brand" href="#">
                        前端百宝箱
                    </a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li>
                                <a href="../index.html">
                                    首页
                                </a>
                            </li>
                            <li>
                                <a href="../html.html">
                                    HTML
                                </a>
                            </li>
                            <li>
                                <a href="../css.html">
                                    CSS
                                </a>
                            </li>
                            <li>
                                <a href="../javascript.html">
                                    JavaScript
                                </a>
                            </li>
                            <li class="active">
                                <a href="../tools.html">
                                    工具
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="container">	
			<div class="alert alert-info">
				<i class="icon-star"></i>&nbsp;&nbsp;各种编码格式的相互转换。
			</div>
			<ul id="tab" class="nav nav-tabs">
			  <li class="active"><a href="#confuse" data-toggle="tab">JS 压缩混淆</a></li>
			  <li><a href="#lint" data-toggle="tab">JSON 格式校验</a></li>
			  <li><a href="#format" data-toggle="tab">JSON 格式化</a></li>
			  <li><a href="#utf8" data-toggle="tab">demo</a></li>
			</ul>
 
			<div class="tab-content">
			  <div class="tab-pane fade" id="lint">
				<iframe src="jsonlint/index.html" style="width:100%;height:550px" name="container" id="container" frameborder="0" allowtransparency="true" scrolling="yes"></iframe>
			  </div>
			  <div class="tab-pane fade" id="format">
				<iframe src="jsonformat/index.html" style="width:100%;height:390px" name="container" id="container" frameborder="0" allowtransparency="true" scrolling="yes"></iframe>
			  </div>
			  <div class="tab-pane fade  in active" id="confuse">
			  <!-- convert html code begin -->
			<div class="row">
				<div class="span5">
					<textarea id="source">
function jsFunc(arg1, arg2) {
	if (arg1 && arg2) document.body.innerHTML = "achoo";
}</textarea>
				</div>
				<div class="span2">
					<div class="action" style="text-align:center;margin-top:70px;">
						<input type="checkbox" id="base62" checked="checked">&nbsp;Base62 编码
						<input type="checkbox" id="shrink" checked="checked">&nbsp;简化变量<br/>
						<button class="btn btn-large btn-primary" id="compress" style="margin-top:20px;">压缩 &gt;</button><br/>
						<button class="btn btn-large btn-primary" id="decode" style="margin-top:20px;">解压 &lt;</button><br/>
						<button class="btn btn-large btn-primary" id="clear" style="margin-top:10px;">清空</button>
					</div>
				</div>
				<div class="span5">
					<textarea id="result"></textarea>
				</div>
			</div>
			<script type="text/javascript">
			(function(){
				//压缩
				function confuse(sourceEditor,resultEditor){
					var packer=new Packer();
					var r=packer.pack(sourceEditor.getValue(), $("#base62").prop("checked"), $("#shrink").prop("checked"));
					resultEditor.setValue(r);
				}
				//解码
				function decode(sourceEditor,resultEditor){
					var confuse_value=resultEditor.getValue();
					eval("var value=String" + confuse_value.slice(4));
					sourceEditor.setValue(value);
				}
				var sourceEditor = CodeMirror.fromTextArea($("#source")[0], {
					mode: "text/javascript", 
					lineNumbers: true,
					lineWrapping: true,
					tabMode: "indent",
					onChange: function(ctx,data){
						confuse(ctx,resultEditor);
					}
				});
				var resultEditor = CodeMirror.fromTextArea($("#result")[0], {
					mode: "text/javascript", 
					lineNumbers: true,
					lineWrapping: true,
					tabMode: "indent"
				});
				
				$("#compress").click(function(){
					confuse(sourceEditor,resultEditor);
				});
				$("#decode").click(function(){
					decode(sourceEditor,resultEditor);
				});
				
				$("#clear").click(function(){
					sourceEditor.setValue('');
					resultEditor.setValue('');
				});
				confuse(sourceEditor,resultEditor);
			})();
			</script>
			   <!-- convert html code end -->
			  </div>
			  <div class="tab-pane fade" id="utf8"></div>
			</div>

            <hr>
            <footer>
                <p>
                    Hongbo Li &copy; 2012 Powered by
                    <a href="../docs/bootstrap/index.html" target="_blank">
                        Bootstrap
                    </a>
                </p>
            </footer>
        </div>
    </body>
</html>
